<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<style>
		* {
			padding: 0px;
			margin: 0px;
		}
		body {
			background-color: #c8cbd2;
			display: flex;
			align-items: center;
			align-content: center;
			justify-content: space-around;
		}
		.container {
			width: 430px;
			height: 750px;
			background-color: #e2e6e9;
			border-radius: 75px;
			margin-top: 50px;
		}
		.container .cir {
			width: 320px;
			height: 320px;
			border-radius: 50%;
			background-color: #e2e6e9;
			margin: auto;
			margin-top: 110px;
			/* 除了可以设阴影外，还可以在背景图弄线性渐变 */
			box-shadow: 15px 15px 30px rgba(0, 0, 0, 0.3),
				-15px -15px 30px rgba(255, 255, 255, 0.5);
			position: relative;
		}
		.cir .tem {
			width: 160px;
			height: 160px;
			border-radius: 50%;
			background-color: #e2932c;
			text-align: center;
			line-height: 160px;
			font-size: 50px;
			color: white;

			position: absolute;
			left: 50%;
			margin-left: -80px;
			top: 50%;
			margin-top: -80px;

			box-shadow: inset 0px 15px 30px #ad3f1e,
				inset 0px -40px 30px #e3d737;
		}

		.cir .small_cir {
			width: 25px;
			height: 25px;
			border-radius: 50%;
		}

		.cir .another_cir {
			width: 52px;
			height: 52px;
			border-radius: 50%;
			position: relative;
			top: 200px;
			left: 210px;
			background-color: #e2e6e9;
			/* border: 1px solid black; */
			box-shadow: inset 5px 5px 15px rgba(0, 0, 0, 0.25),
				inset -5px -5px 15px rgba(255, 255, 255, 0.7);
		}

		.container .mes {
			width: 320px;
			height: 135px;
			background-color: #d5d8df;
			margin: 67px auto;
			border-radius: 20px;
			display: flex;
			text-align: center;
			align-content: center;
			align-items: center;
			line-height: 30px;
			font-size: 12px;
			color: #8b8e87;
			box-shadow: inset 2px 2px 2px rgba(0, 0, 0, 0.25),
				inset 2px 0px 3px rgba(255, 255, 255, 0.3),
				inset 0px 2px 2px rgba(0, 0, 0, 0.25);
		}

		.mes > div {
			flex: 1;
			/* border: 1px solid black; */
		}

		.mes > div > .wen {
			font-size: 28px;
			color: #362d32;
		}
	</style>
	<body>
		<div class="container">
			<div class="cir">
				<div class="tem">87°</div>
				<div class="small_cir"></div>
				<div class="another_cir"></div>
			</div>
			<div class="mes">
				<div>
					<div>OUTSIDE</div>
					<div class="wen">70°</div>
				</div>
				<div>
					<div>HUMIDITY</div>
					<div class="wen">78%</div>
				</div>
			</div>
		</div>
	</body>
</html>
